<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 清理 body 默认的间距 */
      margin: 0;
    }

    header {
      height: 100px;
      background-color: antiquewhite;
    }

    /* 固定导航 */
    nav {
      width: 100%;
      height: 50px;
      background-color: gold;
      /* 🔔定位：固定定位 */
      position: fixed;
      /* 🔔顶部坐标：负盒子高度，把盒子移动出屏幕外 */
      top: -50px;
      transition: all 0.4s;
    }

    section {
      height: 2000px;
      background-color: pink;
    }

    footer {
      height: 200px;
      background-color: lightslategray;
    }
  </style>
</head>

<body>
  <header>头部</header>
  <!-- 🙈 固定导航盒子，默认在屏幕外面(默认看不到，页面滚动到一定程度再进来) -->
  <nav>固定导航</nav>
  <section>分区</section>
  <footer>底部</footer>

  <script>
    /* 直接给文档添加滚动事件 */
    //   scroll    滚动事件
    document.addEventListener('scroll', function () {
      // 获取 body 标签的 矩形坐标值和宽高 
      //  get         获取
      //  Bounding    边界
      //  Client      客户机(浏览器)
      //  Rect        矩形(盒子)
      let juxing = document.body.getBoundingClientRect()
      // 获取 nav 导航标签
      let nav = document.querySelector('nav')
      // 如果顶部坐标值超过一定数值
      if (juxing.top <= -520) {
        // 显示固定导航
        nav.style.top = '0px'
      } else {
        // 隐藏固定导航
        nav.style.top = '-50px'
      }
    })
  </script>
</body>

</html>